<template>
  <div class="article-page">
    <div class="article-container">
      <!-- 文章标签 -->
      <div class="article-tags">
        <el-tag
          v-for="tag in article.tags"
          :key="tag"
          class="tag-item"
          effect="plain"
          size="small"
        >
          {{ tag }}
        </el-tag>
      </div>

      <!-- 文章标题 -->
      <h1 class="article-title">{{ article.title }}</h1>

      <!-- 文章元信息 -->
      <div class="article-meta">
        <span class="meta-item">
          <el-icon><View /></el-icon>
          {{ article.views }} 次浏览
        </span>
        <span class="meta-divider">|</span>
        <span class="meta-item">
          <el-icon><Clock /></el-icon>
          {{ article.date }}
        </span>
        <span class="meta-divider">|</span>
        <span class="meta-item">
          <el-icon><Document /></el-icon>
          {{ article.wordCount }} 字
        </span>
      </div>

      <!-- 文章内容区域 -->
      <div class="article-content">
        <div class="content-main">
          <!-- 自我介绍部分 -->
          <section class="content-section" id="introduction">
            <h2 class="section-title">
              <el-icon><UserFilled /></el-icon>
              自我介绍
            </h2>
            <div class="section-content introduction-content">
              {{ article.introduction }}
            </div>
          </section>

          <!-- 项目介绍部分 -->
          <section class="content-section" id="project">
            <h2 class="section-title">
              <el-icon><Collection /></el-icon>
              关于实践项目
            </h2>
            <div class="section-content">
              <div class="project-info">
                <p>{{ article.projectDescription }}</p>
                <div class="demo-info" v-if="article.demoUrl">
                  <h3>演示地址：</h3>
                  <el-link :href="article.demoUrl" target="_blank" type="primary">
                    {{ article.demoUrl }}
                    <el-icon class="el-icon--right"><Link /></el-icon>
                  </el-link>
                </div>
                <div class="account-info" v-if="article.account">
                  <h3>后台登录演示账号：</h3>
                  <ul>
                    <li>账号：{{ article.account.username }}</li>
                    <li>密码：{{ article.account.password }}</li>
                  </ul>
                </div>
              </div>
            </div>
          </section>

          <!-- 技术栈部分 -->
          <section class="content-section" id="tech-stack">
            <h2 class="section-title">
              <el-icon><SetUp /></el-icon>
              技术栈
            </h2>
            <div class="section-content">
              <el-descriptions :column="1" border>
                <el-descriptions-item v-for="(tech, index) in article.techStack" 
                  :key="index" 
                  :label="tech.category"
                >
                  {{ tech.items.join('、') }}
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </section>
        </div>

        <!-- 右侧目录导航 -->
        <div class="content-nav">
          <div class="nav-container">
            <h3 class="nav-title">
              <el-icon><List /></el-icon>
              文章目录
            </h3>
            <ul class="nav-list">
              <li>
                <a href="#introduction" :class="{ active: activeSection === 'introduction' }">
                  👋 自我介绍
                </a>
              </li>
              <li>
                <a href="#project" :class="{ active: activeSection === 'project' }">
                  🎯 关于实践项目
                </a>
              </li>
              <li>
                <a href="#tech-stack" :class="{ active: activeSection === 'tech-stack' }">
                  🛠 技术栈
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { 
  View, 
  Clock, 
  Document, 
  UserFilled, 
  Collection, 
  SetUp, 
  Link,
  List 
} from '@element-plus/icons-vue'

// 模拟文章数据
const article = {
  title: '从零手搭：前后端分离博客（全栈开发，已更新39w+字）',
  tags: ['专栏', '知识星球', '项目实战', '从 0 到 1'],
  views: 7198,
  date: '2023-11-23 11:56:09',
  wordCount: 100060,
  introduction: '大家好，我是小哈，前某广告台架构，公众号小哈学 Java 作者。91年生人，码龄 9 年，先后供职于支付、共享等互联网领域，主导负责过数据传输、日志平台、任务调度、文件平台等产品，以支撑各部门业务线。喜欢分享知识，热爱技术，也不止于技术，不只是写 Java，业余也爱玩前端、Python、Android 等，是个活跃的技术拥趸者。',
  projectDescription: '知识星球是个私密学习圈子，我会在星球内部，出一系列从 0 到 1 的实战项目，贴合真实的企业级项目开发规范，使用主流的企业技术栈，全程手写后端 + 前端完整代码，通过专栏的形式，把每个功能点的开发步骤，手把手，通过丰富的图片 + 文字，保姆级教学（PS: 同时按小书进度提供代码，不至于一上来代码量太多，不知道从哪入手）。',
  demoUrl: 'http://116.62.199.48',
  account: {
    username: 'test',
    password: 'test'
  },
  techStack: [
    {
      category: '后端技术栈',
      items: ['Spring Boot', 'Spring Security', 'Spring Cloud Alibaba', 'MyBatis-Plus', 'Redis', 'MySQL']
    },
    {
      category: '前端技术栈',
      items: ['Vue 3', 'TypeScript', 'Element Plus', 'Vite', 'Pinia']
    },
    {
      category: '开发工具',
      items: ['IDEA', 'VSCode', 'Git', 'Maven', 'Docker']
    }
  ]
}

// 当前激活的章节
const activeSection = ref('introduction')

// 监听滚动事件，更新当前激活的章节
const handleScroll = () => {
  const sections = ['introduction', 'project', 'tech-stack']
  for (const section of sections) {
    const element = document.getElementById(section)
    if (element) {
      const rect = element.getBoundingClientRect()
      if (rect.top <= 100 && rect.bottom >= 100) {
        activeSection.value = section
        break
      }
    }
  }
}

onMounted(() => {
  window.addEventListener('scroll', handleScroll)
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})
</script>

<style scoped>
.article-page {
  width: 100%;
  padding: 24px 0;
  background-color: var(--primary-bg);
}

.article-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.article-tags {
  margin-bottom: 16px;
}

.tag-item {
  margin-right: 8px;
}

.article-title {
  font-size: 28px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
  margin: 0 0 16px;
  line-height: 1.4;
}

.article-meta {
  margin-bottom: 32px;
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
}

.meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.meta-divider {
  margin: 0 12px;
  color: rgba(0, 0, 0, 0.06);
}

.article-content {
  display: flex;
  gap: 48px;
}

.content-main {
  flex: 1;
  min-width: 0;
}

.content-section {
  margin-bottom: 48px;
}

.section-title {
  font-size: 20px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
  margin: 0 0 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-content {
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  line-height: 1.8;
}

.introduction-content {
  background-color: #fafafa;
  padding: 16px;
  border-radius: 2px;
  border-left: 4px solid var(--accent-color);
}

.project-info {
  background-color: #fafafa;
  padding: 16px;
  border-radius: 2px;
}

.demo-info, .account-info {
  margin-top: 16px;
}

.demo-info h3, .account-info h3 {
  font-size: 14px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
  margin: 0 0 8px;
}

.account-info ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.account-info li {
  margin-bottom: 4px;
}

.content-nav {
  width: 250px;
  flex-shrink: 0;
}

.nav-container {
  position: sticky;
  top: 24px;
  padding: 16px;
  background-color: #fff;
  border-radius: 2px;
  border: 1px solid #f0f0f0;
}

.nav-title {
  font-size: 16px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-list li {
  margin-bottom: 12px;
}

.nav-list a {
  color: rgba(0, 0, 0, 0.65);
  text-decoration: none;
  font-size: 14px;
  display: block;
  padding: 8px 16px;
  border-radius: 2px;
  transition: all 0.3s;
}

.nav-list a:hover {
  color: var(--accent-color);
  background-color: #fafafa;
}

.nav-list a.active {
  color: var(--accent-color);
  background-color: #f0f0f0;
}

:deep(.el-descriptions) {
  --el-descriptions-item-bordered-label-background: #fafafa;
}

:deep(.el-descriptions__label) {
  font-weight: 500 !important;
}

@media (max-width: 768px) {
  .article-content {
    flex-direction: column;
  }

  .content-nav {
    width: 100%;
    margin-top: 24px;
  }

  .nav-container {
    position: static;
  }
}
</style> 